<style>
    .ly-tip-box{
        padding: 20px;
        background-color: #F9FAFC;
        border-radius: 2px;
        margin-bottom: 20px;
        color: #5e6d82;
        display: flex;
        text-align: left;
    }
    .ly-tip-box.ly-tip-box-plain{
        padding: 0;
        background-color: #fff;
    }
    .ly-tip-box-success{
        background-color:#ecf8ff;
    }
    .ly-tip-box-warning{
        background-color:#fff6f7;
    }
    .ly-tip-box-border.ly-tip-box-warning{
        border-left:5px solid #fe6c6f;
    }
    .ly-tip-box-border.ly-tip-box-success{
        border-left:5px solid #50bfff;
    }
    .ly-tip-box ul,.ly-tip-box ol{
        padding-left: 30px;
        margin: 0;
    }
    .ly-tip-box ul li {
        font-size: 14px;
        line-height: 28px;
        list-style: disc;
        margin: 0;
    }
    .ly-tip-box ol li {
        font-size: 14px;
        line-height: 28px;
        list-style: decimal;
        margin: 0;
    }
    .ly-tip-box p {
        font-size: 14px;
        line-height: 28px;
        margin: 0;
    }
    .ly-tip-box h1,.ly-tip-box h2,.ly-tip-box h3,.ly-tip-box h4,.ly-tip-box h5,.ly-tip-box h6 {
        font-weight: bold;
        margin: 15px 0;
        font-size: 14px;
    }

    .ly-tip-box .ly-img-info+ul, .ly-tip-box .ly-img-info+ol{
        margin-top: 15px;
    }
</style>
<template>
    <div :class="['ly-tip-box-'+type,border&&!plain?'ly-tip-box-border':null,plain?'ly-tip-box-plain':null]"  class="ly-tip-box">
        <div style="flex: 1;">
            <slot></slot>
        </div>
        <div >
            <slot name="extra"></slot>
        </div>
    </div>
</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-tip',
            props: {
                plain:{
                    type:Boolean,
                    default: false
                },
                type: {
                    type: String,
                    default: 'info'
                },
                border:{
                    type:Boolean,
                    default: false
                }
            }, watch: {
                closeable: function (value) {
                }
            }, created: function () {
            }
        }
    });
</script>
